<template>
  <div class="home-content">
    <div class="common-layout">
      <el-container>
        <el-aside width="200px">
          <LeftView></LeftView>
        </el-aside>
        <el-container>
          <el-header>
           <Header></Header>
          </el-header>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import LeftView from "../components/layout/LeftView.vue";
import Header from '../components/layout/HeaderView.vue'

export default defineComponent({
  components: {
    LeftView,
    Header
  },
  setup() {
    return {};
  },
});
</script>

<style lang='less' scoped>
.home-content {
  width: 100%;
  height: 100%;
  display: flex;
  background: #ccc;
  .common-layout {
    width: 100%;
    height: 100%;
    .el-container {
      width: 100%;
      height: 100%;
      .el-header{
        padding:0 !important;
      }
    }
    .el-aside {
      height: 100% !important;
    }
  }
  //  .left{
  //   flex: 0 0 200px;
  //   height: 100%;
  //  }
  //  .rigth{
  //   flex: 1;
  //  }
}
</style>
